import React,{
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet
} from 'react-native';

import {
    Props,
    Button
}  from './types';

import Press from './../Press';

interface _Props extends Props {
    onClose: Function,
    showClose:boolean,
    onDialogClose: Function
}

import close_icon from './images/close.png';

class Modal extends PureComponent<_Props> {
    static defaultProps = {
        showClose:true,
        onClose: () => null,
        onDialogClose: () => null
    }

    private _onPress = (onPress?: Function) => {
        const {
            onDialogClose
        } = this.props;

        if (!!onPress && onPress() === false) {
            return false
        }

        onDialogClose();
    }

    get CloseButton() {
        const {
            onDialogClose
        } = this.props;
        return (
            <Press
                onPress={onDialogClose}
                style={styles.closeButton}
            >
                <Image
                    source={close_icon}
                    style={styles.closeImage}
                />
            </Press>
        )
    }

    render() {
        const {
            title,
            message,
            buttons,
            showClose
        } = this.props;

        return (
            <View style={styles.container}>
                {showClose?this.CloseButton:null}
                <View style={styles.content}>
                    {!!title && (
                        <Text style={styles.title}>
                            {title}
                        </Text>
                    )}
                    {!!message && (
                        <Text style={styles.message}>
                            {message}
                        </Text>
                    )}
                </View>
                <View style={styles.buttons}>
                    {buttons.map((
                        button: Button, i: number
                    ) => {
                        const _styles = [
                            styles.button,button.style
                        ]
                        if (i === 0) {
                            _styles.push(styles.buttonF)
                        }
                        return (
                            <Press
                                key={i}
                                style={_styles}
                                value={button.onPress}
                                onPress={this._onPress}
                            >
                                <Text style={[
                                    styles.buttonText,
                                    button.textStyle
                                ]}>
                                    {button.text}
                                </Text>
                            </Press>
                        )
                    })}
                </View>
            </View>
        )
    }
}

export default Modal;


const styles = StyleSheet.create({
    container: {
        width: `80%`,
        borderRadius: 10,
        alignSelf: `center`,
        backgroundColor: `#fff`
    },
    button: {
        flex: 1,
        alignItems: `center`,
        justifyContent: `center`,
        borderLeftWidth: 1,
        borderColor: `#ececec`
    },
    buttonF: {
        borderLeftWidth: 0
    },
    buttons: {
        height: 48,
        borderTopWidth: 1,
        flexDirection: `row`,
        borderColor: `#ececec`
    },
    content: {
        paddingVertical:30,
        paddingHorizontal: 20
    },
    title: {
        color: `#454545`,
        fontSize: 16,
        fontWeight:`600`,
        marginBottom: 16,
        textAlign: `center`
    },
    message: {
        fontSize: 15,
        color: `#727272`,
        lineHeight:21,
        textAlign: `center`
    },
    buttonText: {
        color: `#333`,
        fontSize: 16
    },
    closeImage:{
        width:16,
        height:16
    },
    closeButton:{
        width:36,
        height:36,
        right:0,
        top:0,
        zIndex:10,
        alignItems:`center`,
        position:`absolute`,
        justifyContent:`center`
    }
}) as any;